<template>
  <div>
    <!-- 顶部 -->
    <top></top>

    <!-- 轮播图 -->
    <el-carousel :interval="4000" type="card" height="300px">
      <el-carousel-item v-for="(img, key) in bannerImages" :key="key">
        <img :src="img.url">
      </el-carousel-item>
    </el-carousel>

    <!-- 推荐歌单 -->
    <div class="item-box">
      <div class="item-left-right-box">
        <!-- 顶部菜单 -->
        <div class="top-box">
          <span class="span-class">推荐歌单</span>
          <a href="" class="a-class">更多<img class="jiantou-class" src="../assets/icons/icon-jiantou-right.png"></a>
        </div>

        <!-- 内容 -->
        <div class="content-box">
          <div @mouseover="showPlayIcon" @mouseleave="closePlayIcon" class="content-left-box">
            <div class="content-left-top-class">
              <span class="span-class">570.7万</span>
            </div>

            <div class="content-left-bottom-class">
              <div
                style="float: left;width: 70%;margin-left: 10px;display: inline-grid;text-align: left;color: #FFFFFF">
                <span style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap">歌单名</span>
                <span>创建人</span>
              </div>

              <div v-if="showPlay" style="float: right;width: 20%">
                <img style="width: 45px;height: 45px" src="../assets/icons/icon-play.png">
              </div>

            </div>
          </div>

          <div style="margin-top: 10px;background-color: red;float: right;width: 360px;height: 360px"></div>
        </div>


      </div>

      <div class="item-left-right-box" style="width:35% ;float: right">

      </div>

    </div>


  </div>

</template>

<script>

import top from '../components/top'

export default {
  name: "index",
  components: {
    top
  },
  data() {
    return {
      /** 轮播图图片集合 */
      bannerImages: [
        {id: '1', url: 'https://imgessl.kugou.com/commendpic/20210902/20210902194948414050.jpg'},
        {id: '2', url: 'https://imgessl.kugou.com/commendpic/20210902/20210902195115907201.jpg'},
        {id: '3', url: 'https://y.qq.com/music/common/upload/MUSIC_FOCUS/4068325.jpg?max_age=2592000'}
      ],
      /** 是否展示播放按钮 */
      showPlay: false
    }
  },
  methods: {
    /** 展示播放按钮 */
    showPlayIcon() {
      this.showPlay = true
    },
    /** 关闭播放按钮 */
    closePlayIcon() {
      this.showPlay = false
    }
  }
}
</script>

<style lang="scss" scoped>

.item-box {
  height: 420px;
  padding: 0 150px;


  .item-left-right-box {
    width: 60%;
    height: 100%;
    float: left;
    padding: 20px 0 0 0;

    .top-box {
      border-bottom: 1px solid #42b983;
      height: 30px;

      .span-class {
        float: left;
        font-size: 20px;
      }

      .a-class {
        float: right;
        position: relative;
        right: 20px;
        color: #2c3e50;
        text-decoration: none;

        .jiantou-class {
          position: absolute;
          width: 20px;
          height: 20px;
        }
      }
    }

    .content-box {
      height: 370px;

      .content-left-box {
        position: relative;
        margin-top: 10px;
        float: left;
        width: 360px;
        height: 360px;
        background-image: url("https://imgessl.kugou.com/custom/480/20201207/20201207134716994336.jpg");
        background-size: 100% 100%;

        .content-left-top-class {

          background-image: url("../assets/images/cptTBg.png");
          background-size: 100% 100%;
          height: 30px;
          width: 50%;
          position: absolute;
          top: 0;
          right: 0;

          .span-class {
            color: #FFFFFF;
            float: right;
            margin-top: 3px;
            position: relative;
            display: inline-block;
          }

          .span-class::before {
            width: 25px;
            height: 90%;
            left: -35px;
            position: absolute;
            content: '';
            display: block;
            background-image: url("../assets/icons/icon-erji.png");
            background-size: 100% 100%;
          }
        }


        .content-left-bottom-class {
          height: 50px;
          width: 100%;
          position: absolute;
          bottom: 0;
          background-image: url("../assets/images/cptTBg.png");
          background-size: 100% 100%;
        }
      }

      .content-left-box:hover {
        opacity: 0.8;
        cursor: pointer;
      }

    }
  }

}

</style>
